<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 800px;
				height: 500px;
				margin: 30px auto;
				background-color: bisque;
				/* 2.绑定动画 */
				/* infinite:无限 */
				animation mv 3s linear infinite;
			}
			/* 1.创建关键帧 */
			@keyframes mv{  /* 动画开始的状态 */
				0%,20%{
					background-color: aqua;
					width: 0;
				}
				50%{  /* 动画结束的状态 */
					background-color: brown;
					width: 800px;
				}
				100%{    /* 当前状态持续时间 */
					background-color: blueviolet;
					width: 1200px;
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
